<template>
  <div class="card-out-container">
    <a-spin :spinning="spinning">
      <a-form layout="inline" v-if="showMore" class="multi-line-search-form">
        <a-form-item :label="$t('hangManage.makeNo')">
          <a-input v-model:value.trim="queryParam.moNo" :placeholder="$t('other.pleaseInputMakeNo')" allowClear />
        </a-form-item>
        <a-form-item :label="$t('basicData.styleNo')">
          <a-input v-model:value.trim="queryParam.styleNo" :placeholder="$t('basicData.pleaseInputStyleNo')" allowClear />
        </a-form-item>
        <a-form-item :label="$t('common.createTime')">
          <a-range-picker v-model:value="queryParam.time" :placeholder="[$t('common.startDate'), $t('common.endDate')]" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="loadData">{{ $t('common.see') }}</a-button>
            <a-button @click="searchReset">{{ $t('common.reset') }}</a-button>
          </a-space>
        </a-form-item>
      </a-form>
      <CustomTable rowKey="id" :loading="loading" bordered size="small" :dataSource="dataSource" :columns="columns" :scroll="{y: 'calc(100vh - 390px)'}" :pagination="ipagination" @change="handleTableChange"
                   :rowSelection = null :showMore="showMore" :operateMargin="true" :drag="false" storeTableName="yieldRateTable"  tableColumnsSort="yieldRateTableSort" >
        <template #operateLeft>
          <div class="operate-left">
            <a-button type="primary" @click="exportTable">{{ $t('common.outputExcel') }}</a-button>
            <!--<a-button type="primary" ghost @click="printTable">打印</a-button>-->
          </div>
        </template>
        <template #operateRight>
          <div class="slot-operate-right">
            <a-input-search v-model:value="queryParam.moNo" :placeholder="$t('hangManage.makeNo')"  enter-button   v-if="!showMore" @search="loadData" />
            <a-button class="ml-10" @click="toggleMore" type="primary" ghost>{{ $t('common.highFilter') }}</a-button>
          </div>
        </template>
        <template #bodyCell="{ scope }">
          <template v-if="scope.column.key === 'code'">
            <span class="code-link">{{scope.record.code}} </span>
          </template>
        </template>
      </CustomTable>
      <div style="display:none;">
        <a-table id="printId" :loading="loading" bordered size="small" :dataSource="printDataList" :columns="printColumnsArr" :pagination="false">

        </a-table>
      </div>
    </a-spin>
  </div>
</template>
<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import { columns } from './modules/config.js'
import { cloneDeep } from 'lodash'
import {filterObj, startTimeValue, endTimeValue, getLocalStorage} from '@/utils'
import axios from "@/utils/request"
import printJS from "print-js"
import CustomTable from '@/components/commonTable/customTable.vue'
export default {
  name: 'yieldRate',
  components:{
    CustomTable
  },
  mixins: [ListMixinPm],
  data () {
    return {
      columns: columns,
      spinning: false,
      printDataList: [],
      url: {
        list: '/api/report/get-achieve-rate',
        exportUrl: '/api/report/export-achieve-rate'
      },
      columnsArr : [],
      columnsTitleArr : [],
      printColumnsArr : [],
    }
  },
  methods: {
    getQueryParams () {
      this.getColumnsList()
      let param = cloneDeep(this.queryParam)
      if (this.queryParam.time && this.queryParam.time.length) {
        param.moStartTime = startTimeValue(this.queryParam.time[0])
        param.moEndTime = endTimeValue(this.queryParam.time[1])
      }
      delete param.time
      param.sortingFields = this.isorter.field ?  [this.isorter] : null
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      // console.log(param)
      return filterObj(param)
    },

    async printTable () {
      await this.getColumnsList()
      this.queryParam.pageNo = 1
      this.queryParam.pageSize = 65335
      const res = await axios.postAction(this.url.list, this.queryParam);
      if (!res.data) return
      this.spinning = true;
      if (res) {
        this.printDataList = res.data.list;
        if (this.printDataList.length > 0) {
          setTimeout(() => {
            this.printTableData();
            this.spinning = false;
          }, 2000);
        } else {
          this.spinning = false;
        }
      }
    },
    printTableData () {
      printJS({
        printable: "printId",
        type: "html",
        documentTitle: "["+this.$t('other.yieldRate')+"]",
        style: "#printId{width:100%;} "
          + " #printId .ant-table-thead>tr>th, #printId .ant-table-tbody>tr>td  {border: 1px solid #bcb8b8;border-collapse: collapse;} "
          + " #printId table{border-collapse: collapse;} "
      });
    },
    async exportTable(){
      await this.getColumnsList()
      let param = { No: 1, pageSize: 65335, columns:this.columnsArr ,tables:this.columnsTitleArr}
      this.exportExcels(this.url.exportUrl, this.$t('other.rateReport'), true,param)
    },
    async getColumnsList(){
      let colArr = [];
      let paramsArr = [];
      let titleArr = [];
      let hangerTrackTable =  getLocalStorage("yieldRateTable") ? getLocalStorage("yieldRateTable") : columns;

      if (hangerTrackTable && hangerTrackTable.length>0){
        hangerTrackTable.forEach(
            item=>{
              if (!item.disappear){
                paramsArr.push(item.dataIndex)
                titleArr.push(item.title)
                colArr.push(item)
              }
            }
        )
      }
      this.columnsArr = paramsArr;
      this.columnsTitleArr = titleArr;
      this.printColumnsArr = colArr;
      // console.log(colArr,titleArr,paramsArr)
    },

  }
}
</script>
